<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams" class="search-form-new">
      
      <!-- <el-form-item label="群号">
        <el-input v-model="form.toGroup" placeholder="群号"></el-input>
      </el-form-item> -->
      <el-form-item label="会话类型" prop="msgType">
        <el-select v-model="queryParams.msgType" placeholder="请选择会话类型"  clearable >
          <el-option :label="'单聊'" :value="1" />
          <el-option :label="'群聊'" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="会话名称">
        <el-input
          v-model="queryParams.sessionName"
          placeholder="请输入会话名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="创建时间" prop="">
        <el-date-picker style="width:215px" size="small" v-model="timer" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="简介">
        <el-input
          v-model="form.groupDesc"
          placeholder="请输入简介"
        ></el-input>
      </el-form-item> -->
      <el-form-item class="btns">
        <el-button type="primary" @click="pageNum=1;getList()">搜索</el-button>
        <el-button type="warning" @click="chongzhi" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box" >
      <el-table border :data="list" style="width: 100%">
        <!-- <el-table-column prop="id" label="群id" width="100"> </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" width="160" align="left">
        </el-table-column>
       
        <el-table-column prop="groupName" label="会话名称" width="300" align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.msgType==1">{{ getSessionName(scope.row) }}</span>
            <span v-if="scope.row.msgType==2">{{scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最近联系" width="160" align="left"></el-table-column>
        <el-table-column prop="" label="最新消息" width="300" show-overflow-tooltip align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.type=='text'">{{ scope.row.content }}</span>
            <span v-else-if="scope.row.type=='custom'&&scope.row.customType=='image'">[图片消息]</span>
            <span v-else-if="scope.row.type=='custom'&&scope.row.customType=='video'">[视频消息]</span>
            <span v-else-if="scope.row.type=='custom'&&scope.row.customType=='goods'">[商品消息]</span>
            <span v-else>其他消息类型</span>
          </template>
        </el-table-column>
        
        <!-- <el-table-column prop="groupDesc" label="群简介" width="400" show-overflow-tooltip>
        </el-table-column> -->
        
        <!-- <el-table-column prop="announcement" label="群公告" width="200">
        </el-table-column> -->
        <!-- <el-table-column prop="numbers" label="群成员" width="366">
        </el-table-column> -->
        <el-table-column prop="del" label="状态" width="100" align="left">
          <template #default="{ row }">
            <el-button
              v-if="row.del === 2"
              size="mini"
              type="danger"
              plain
              disabled
              >解散</el-button
            >
            <el-button
              v-if="row.del === 1"
              size="mini"
              type="success"
              plain
              disabled
              >正常</el-button
            >
          </template>
        </el-table-column>
        
        <el-table-column label="操作"  align="left">
          <template #default="{ row }">
            <!-- <el-button v-if="row.del === 1" type="text" @click="changefn(row)"
              >修改</el-button
            >
            <el-button
              v-if="row.del === 1"
              type="text"
              style="color: red"
              @click="detaleId(row)"
              >解散</el-button
            > -->
            <el-button
              type="text"
              @click="chakanjilu(row)"
              >聊天记录</el-button
            >
            <!-- <el-button
              v-if="row.del === 2"
              type="text"
              style="color: green"
              @click="huifu(row)"
              >恢复</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
        @pagination="getList" />
    </div>


   

    <!-- 编辑弹出层 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- <span>这是一段信息</span> -->
      <el-form :model="bianji" label-width="80px">
        <el-form-item label="群编号">
          <el-input
            v-model="bianji.groupId"
            placeholder="请输入群编号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="群名称">
          <el-input
            v-model="bianji.groupname"
            placeholder="请输入群名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="群简介">
          <el-input
            v-model="bianji.description"
            placeholder="请输入群简介"
          ></el-input>
        </el-form-item>
        <el-form-item label=" 群公告">
          <el-input
            v-model="bianji.announcement"
            placeholder="请输入群公告"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editShuju">确 定</el-button>
      </span>
    </el-dialog>

    <MsgHistroy :showDialog="showDialog" @close="guanbi" :sessionId="toGroups"/>
  </div>
</template>

<script>
// import { getHistoryMessageCustom, searchInSession } from "../../api/custom";
import qunxinxiApi from "../../api/qunxinxi";
import MsgHistroy from './msgHistory/index.vue'
export default {
  name:'IMmsgIndex',
  components:{
    MsgHistroy
  },
  data() {
    return {
      loading:false,
      showDialog:false,
      keyword: "",
      pageSize: 10,
      pageNum: 1,
      timer:[],
      queryParams: {
        sessionName: "",
        createTimeStart: "",
        createTimeEnd: "",
        msgType:2
      },
      bianji: {
        groupId: "",
        groupname: "",
        description: "",
        announcement: "",
      },
      list: [],
      liaotianList: [],
      total: 0,
      ltTotal: 0,
      dialogVisible: false,
      dialogVisibless: false,
      toGroups: "",
      viewImgUrls: "",
      type:''
    };
  },
  created() {
    this.getList();
  },
  computed: {

    tenantInfo() {
      return this.$store.getters.shopInfo;
    },
    getSessionName(){
      return (row)=>{
        let fromname = ''
        let toname = ''
        if(row.toTenantId == this.tenantInfo.tenantId){
          // 接收方是本店铺人员
          toname = row.toNickName
        }else{
          toname = row.toNickName +`【${row.toTenantName}】`
        }
        if(row.fromTenantId == this.tenantInfo.tenantId){
          // 发送方是本店铺人员
          fromname = row.fromNickName
        }else{
          fromname = row.fromNickName +`【${row.fromTenantName}】`
        }
        return row.toUserId>row.formUserId? fromname +' - '+ toname:toname +' - '+ fromname

      }
    }
  },

  methods: {
    //guanbi
    guanbi(){
     this.showDialog = false
    },
    //聊天记录
    async chakanjilu(row) {
      this.toGroups = row.sessionId;
      this.showDialog = true;
      // this.getLiaotian();
    },
   
    //编辑弹出层确认按钮
    async editShuju() {
      const res = await qunxinxiApi.editWord(this.bianji);

      this.dialogVisible = false;
      this.getList();
      this.$message({
        type: "success",
        message: "编辑成功!",
      });
    },
    //编辑弹层
    changefn(row) {
      this.dialogVisible = true;
      this.bianji.groupId = row.toGroup;
      this.bianji.groupname = row.groupName;
      this.bianji.description = row.groupDesc;
      this.bianji.announcement = row.announcement;
    },
    //编辑弹层关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //解散
    detaleId(row) {
      this.$confirm("此操作将解散当前聊天群, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await qunxinxiApi.delWord(row.id);
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取删除",
          });
        });
    },
    //恢复
    huifu(row) {
      this.$confirm("此操作将恢复当前这条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await qunxinxiApi.huifuId(row.id);
          this.getList();
          this.$message({
            type: "success",
            message: "恢复成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取恢复",
          });
        });
    },

    //重置
    chongzhi() {
      this.timer = []
      this.queryParams = {
        sessionName: "",
        createTimeStart: "",
        createTimeEnd: "",
        msgType:2
      };
      this.getList();
    },
    //获取列表
    async getList() {
      this.loading = true
      if (this.timer && this.timer.length == 2) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      const res = await qunxinxiApi.getListnew({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.queryParams,
      });
      this.loading = false
      this.list = res.rows;
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 10px;
}

.search_box {
  display: flex;
  // margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;

  .btn {
    margin-left: 10px;
  }
}

.msg_history_box {
  padding: 10px;
  padding-top: 10px;
  width: 100%;
  height: calc(100vh - 400px);
  overflow-y: auto;
  // border: 1px solid #e0dfdf;
  box-sizing: border-box;
  // background-color: #fff;
  border-top: 3px solid #79bbff;
  background-color: #f9f9f9;

  .msg_item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .avatar {
    img {
      border-radius: 5px;
      width: 50px;
      height: 50px;
    }
  }

  .msg {
    display: flex;

    .msg_cont {
      padding-top: 5px;
      max-width: 500px;
    }

    .name {
      color: #999;
      margin-bottom: 5px;
    }
  }
  .msg_info {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    line-height: 22px;
  }

  .mine_msg {
    .avatar {
      margin-left: 10px;
    }

    .name {
      text-align: right;
    }
    .msg_info {
      background-color: #c1e3fc;
      padding: 10px;
      border-radius: 5px;
      line-height: 22px;
    }
  }

  .other_msg {
    .avatar {
      margin-right: 10px;
    }
    .msg_info {
      background-color: #fff;
      padding: 10px;
      border-radius: 5px;
      line-height: 22px;
    }
  }

  .img_msg {
    // max-height: 200px;
    // width: 200px;
    .img {
      height: 200px;
      width: 100%;
    }
    .video {
      width: 350px;
    }
  }
}

.msg_search_box {
  background-color: #fff;
  .avatar {
    margin-right: 10px;
  }
  .msg_info {
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  .msg_item {
    padding: 5px 15px;
    border-bottom: 1px solid #ccc;
  }

  .time {
    margin-left: 10px;
  }
}
</style>